<template>
  <div class="common-position">
    <div class="loading-dots">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Loadings'
}
</script>
<style scoped>
/* 水平垂直居中 于窗口 */
.loading-dots{
  width: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.loading-dots div{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #666666;
  animation:dotsLoding 0.8s ease-in-out alternate infinite;
}
.loading-dots div:nth-of-type(6){
  animation-delay: -0.2s;
}
.loading-dots div:nth-of-type(5){
  animation-delay: -0.4s;
}
.loading-dots div:nth-of-type(4){
  animation-delay:  -0.6s;
}
.loading-dots div:nth-of-type(3){
  animation-delay: -0.8s;
}
.loading-dots div:nth-of-type(2){
  animation-delay: -1s;
}
.loading-dots div:nth-of-type(1){
  animation-delay: -1.2s;
}
@keyframes dotsLoding{
  from{
    opacity: 1;
  }
  to{
    opacity: 0;
  }
}
.copy-right{
  font-size: 13px;
  text-align: center;
  width: 100%;
  bottom: 18px;
  letter-spacing: 1px;
  color: rgb(94, 92, 92);
}
</style>
